<template>
  <div class="flex-1">
    <div v-if="userProfile&&currentConversation.type!='system'" class="border-bottom padding-20 flex flex-c-c" :class="{'m-user-profile':isDesMobile}">
      <div class="" style="width:40px;height: 40px;border-radius: 100%;">
        <el-image :src="userImage||defaultImage" :fit="userImage?'fill':'contain'" alt="" style="width: 100%;height: 100%;border-radius: 100%;" />
      </div>
      <span class="padding-left-10">{{ userProfile }}</span>
    </div>
    <!--<div class="border-bottom padding-20 flex flex-c-c" v-else>
            <span class="padding-left-10">系统通知</span>
        </div>-->
    <div class="im-container" :class="{'border-no':isDesMobile}">

      <el-scrollbar
        ref="myScrollbar"
        class="myScrollbar"
        style="overflow-x:hidden;"
        :class="{'msg-box' : isDesMobile,
                 'height450':currentConversation.type=='C2C',
                 'height640':currentConversation.type!='C2C' }"
      >
        <div class="padding-10" :class="{'m-msg-item' : isDesMobile}">
          <template v-if="currentConversation&&systemGroup&&currentConversation.groupProfile&&systemGroup.groupID==currentConversation.groupProfile.groupID">
            <div v-if="!isCompleted" class="seemore color-grey small text-center pointer" :class="{'m-seemore' : isDesMobile}" @click="loadMore">查看更多
            </div>
            <systemMessageItem v-for="(message,index) in currentMessageList" :key="index" :message="message" />
          </template>
          <template v-if="currentConversation.type=='C2C'">
            <div v-if="!isCompleted" class="seemore color-grey small text-center pointer" :class="{'m-seemore' : isDesMobile}" @click="loadMore">查看更多
            </div>
            <!--                        普通消息-->
            <template v-for="(message,index) in currentMessageList">
              <messageItem v-if="message.type == 'TIMTextElem'" :key="index" :message="message" />
              <messageItem v-if="message.type == 'TIMImageElem'" :key="index" :message="message" />
              <messageItem v-if="message.type == 'TIMFaceElem'" :key="index" :message="message" />
              <!--                        视频消息-->
              <videoCallMessageItem v-if="message.type == 'TIMCustomElem'&&message.payload.extension=='videoCallInvite'" :key="index" :message="message" />
              <!--                            提醒对方邀约-->
              <!--                            <remindCallMessageItem :message="message"-->
              <!--                                                  v-if="message.type == 'TIMCustomElem'&&message.payload.extension=='otherEnterMeeting'"-->
              <!--                                                  :key="index"/>-->
            </template>

          </template>
        </div>
      </el-scrollbar>
    </div>
    <messageBox
      v-if="currentConversation.type=='C2C'"
      class="vue margin-top-10 border-top padding-top-10"
      style="width: 100%"
    />
  </div>
</template>
<script>
import createProp from '@/tim';
import messageStoreMixin from '@/store/message/messageStoreMixin';
import { mapGetters } from 'vuex';

import defaultImage from '@/assets/images/avatar.png'
import * as messageStoreUtil from '@/store/message/MessageStoreUtil';

export default {
  name: 'RightMesage',
  data() {
    return { defaultImage }
  },
  computed: {
    ...mapGetters('mobile', [
      'isDesMobile'
    ]),
    userProfile() {
      return this.currentConversation &&
        this.currentConversation.userProfile &&
        this.currentConversation.userProfile.nick
    },
    userImage() {
      return this.currentConversation &&
        this.currentConversation.userProfile &&
        this.currentConversation.userProfile.avatar
    },
  },
  mixins: [
    messageStoreMixin
  ],
  props: {
    value: createProp(String)
  },
  mounted() {
    function scrControl(t) {
      if (t == 0) { // 禁止滚动
        document.body.addEventListener('touchmove', this.bodyScroll, { passive: false });
      } else if (t == 1) { // 开启滚动
        document.body.removeEventListener('touchmove', this.bodyScroll, { passive: false });
      }
    }
    scrControl()

    setTimeout(()=>{
      this.scrollTo(1000000000)
    },2000)
  },
  beforeDestroy() {
    document.body.removeEventListener('touchmove', this.bodyScroll, { passive: false });
  },
  components: {
    videoCallMessageItem: () => import('./videoCallMessageItem'),
    remindCallMessageItem: () => import('./remindCallMessageItem'),
    systemMessageItem: () => import('./systemMessageItem'),
    messageItem: () => import('./messageItem'),
    messageBox: () => import('./messageBox')
  },
  methods: {
    bodyScroll(event) {
      event.preventDefault();
    },
    loadMore() {
      messageStoreUtil.actions_loadMoreStore(this.currentConversation)
    },
    scrollTo(top){
      this.$refs.myScrollbar.$el.children[0].scroll({
        top,
        left: 0,
        behavior: 'smooth'
      })
    },
    scrollToBottom(){
      this.scrollTo(10000000000000000)
    }
  }

}
</script>
<style scoped>
.seemore {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.m-user-profile {
  padding: 10px !important;
  padding-left: 0 !important;
}

.msg-box {
  height: calc(100vh - 160px) !important;
}

.m-msg-item {
  padding: 10px 0 !important;
}

.m-seemore {
  padding: 0 5px;
  background: #fff;
  z-index: 10;
  top: 0;
}

.padding-bottom-65 {
  padding-bottom: 65px;
}

.height450 {
  height: 450px;
}

.height640 {
  height: 640px;
}

 .im-container .el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}
.border-top {
  border-top: 1px solid #ddd;
}
</style>
